//"use strict";

var slider = (function() {
	var imagesArea = document.getElementById(picsid);
	var imagePresent = document.getElementById(imgid);
	var images = imagesArea.getElementsByTagName('li');
	var imgArr = [];
	var presentSpeed = 20;
	var scrollSpeed = 2;
	var scrollStep = 2;
	var opacityStep = 5;
	var checkImage, bxs, bxe, fxs, fxe, ys, ye;
	checkImage = bxs = bxe = fxs = fxe = ys = ye = null;
	return {
		initializaion : function() {
			document.onmousemove = this.byPosition;
			window.onresize = function() {
				setTimeout("borderInit()", 1000);
			};
			ys = this.toppos(imagesArea);
			ye = ys + imagesArea.offsetHeight;
			for ( var i = 0; i < images.length; i++) {
				var v = images[i].value;
				imgArr[i] = v;
				images[i].onclick = new Function("slider.getImage('" + v + "')");
				if (i == 0) {
					this.getImage(v);
				}
			}
			this.borderInit();
		},
		borderInit : function() {
			bxs = slider.leftpos(imagesArea);
			bxe = bxs + imagesArea.parentNode.offsetWidth / 4;
			fxe = bxs + imagesArea.parentNode.offsetWidth;
			fxs = fxe - imagesArea.parentNode.offsetWidth / 4;
		},
		scroll : function(way) {
			clearInterval(imagesArea.timer);
			var from = (way == -1) ? 0
					: (images[imgArr.length - 1].offsetLeft
							- (imagesArea.parentNode.offsetWidth - images[imgArr.length - 1].offsetWidth) + 6);
			imagesArea.timer = setInterval(function() {
				slider.moveScroll(way, from);
			}, scrollSpeed);
		},
		moveScroll : function(way, from) {
			imagesArea.style.left = imagesArea.style.left || '0px';
			var left = imagesArea.style.left.replace('px', '');
			if (way == 1) {
				if (from - Math.abs(left) <= scrollStep) {
					clearTimeout(imagesArea.timer);
					imagesArea.style.left = '-' + from + 'px';
				} else {
					imagesArea.style.left = left - scrollStep + 'px';
				}
			} else {
				if (Math.abs(left) - from <= scrollStep) {
					clearTimeout(imagesArea.timer);
					imagesArea.style.left = from + 'px';
				} else {
					imagesArea.style.left = parseInt(left) + scrollStep + 'px';
				}
			}
		},
		getImage : function(id) {
			if (auto) {
				clearTimeout(imagePresent.timer);
			}
			if (checkImage != null) {
				var imgPresent = imagePresent.getElementsByTagName('img');
				for ( var i = 0; i < imgPresent.length; i++) {
					if (checkImage.id != id) {
						var o = imgPresent[i];
						clearInterval(o.timer);
						o.timer = setInterval(function() {
							slider.hide(o);
						}, presentSpeed);
					}
				}
			}
			if (!document.getElementById(id)) {
				var img = document.createElement('img');
				imagePresent.appendChild(img);
				img.id = id;
				img.av = 0;
				img.style.opacity = 0;
				img.style.filter = 'alpha(opacity=0)';
				img.src = imgdir + '/' + id + imgext;
			} else {
				img = document.getElementById(id);
				clearInterval(img.timer);
			}
			img.timer = setInterval(function() {
				slider.show(img);
			}, presentSpeed);
		},
		nextImage : function(way) {
			var index = 0;
			for (key in imgArr) {
				if (imgArr[key] == checkImage.id) {
					index = key;
				}
			}
			if (imgArr[parseInt(index) + way]) {
				this.getImage(imgArr[parseInt(index) + way]);
			} else {
				if (way == 1) {
					this.getImage(imgArr[0]);
				} else {
					this.getImage(imgArr[imgArr.length - 1]);
				}
			}
		},
		auto : function() {
			var autodelay = 5;
			imagePresent.timer = setInterval(function() {
				slider.nextImage(1);
			}, autodelay * 1000);
		},
		show : function(i) {
			if (i.complete) {
				i.av = i.av + opacityStep;
				i.style.opacity = i.av / 100;
				i.style.filter = 'alpha(opacity=' + i.av + ')';
			}
			if (i.av >= 100) {
				if (auto) {
					this.auto();
				}
				clearInterval(i.timer);
				checkImage = i;
			}
		},
		hide : function(i) {
			i.av = i.av - opacityStep;
			i.style.opacity = i.av / 100;
			i.style.filter = 'alpha(opacity=' + i.av + ')';
			if (i.av <= 0) {
				clearInterval(i.timer);
				if (i.parentNode) {
					i.parentNode.removeChild(i);
				}
			}
		},
		byPosition : function(e) {
			var ie = document.all ? true : false;
			var xp = ie ? event.clientX + document.documentElement.scrollLeft
					: e.pageX;
			var yp = ie ? event.clientY + document.documentElement.scrollTop
					: e.pageY;
			if (xp > bxs && xp < bxe && yp > ys && yp < ye) {
				slider.scroll(-1);
			} else if (xp > fxs && xp < fxe && yp > ys && yp < ye) {
				slider.scroll(1);
			} else {
				clearTimeout(imagesArea.timer);
			}
		},
		leftpos : function(p) {
			var left = 0;
			if (p.offsetParent) {
				while (true) {
					left += p.offsetLeft;
					if (!p.offsetParent) {
						break;
					}
					p = p.offsetParent;
				}
			} else if (p.x) {
				left += p.x;
			}
			return left;
		},
		toppos : function(p) {
			var top = 0;
			if (p.offsetParent) {
				while (true) {
					top += p.offsetTop;
					if (!p.offsetParent) {
						break;
					}
					p = p.offsetParent;
				}
			} else if (p.y) {
				top += p.y;
			}
			return top;
		}
	};
})();

window.onload = function() {
	slider.initializaion();
};